<!DOCTYPE html>
<html>

<head>
  <style>
    table {
      border-collapse: collapse;
      width: 100%;
    }

    th,
    td {
      border: 1px solid black;
      padding: 8px;
    }

    .resize-handle {
      width: 6px;
      background-color: #f4f4f4;
      position: absolute;
      right: -3px;
      top: 0;
      bottom: 0;
      cursor: col-resize;
      z-index: 999;
    }

  </style>
</head>

<body>
  <ul id="my-list">
    <li>项目 1 <button class="up-btn">上升</button><button class="down-btn">下降</button></li>
    <li>项目 2 <button class="up-btn">上升</button><button class="down-btn">下降</button></li>
    <li>项目 3 <button class="up-btn">上升</button><button class="down-btn">下降</button></li>
    <li>项目 4 <button class="up-btn">上升</button><button class="down-btn">下降</button></li>
  </ul>

  <button id="stats-btn">统计</button>

  <div id="stats"></div>

  <script>
    // 获取元素
    const list = document.getElementById('my-list');
    const statsBtn = document.getElementById('stats-btn');
    const stats = document.getElementById('stats');

    // 移动列表项位置的函数
    function moveItemUp (item) {
      const prev = item.previousElementSibling;
      if (prev) {
        list.insertBefore(item, prev);
      }
    }

    function moveItemDown (item) {
      const next = item.nextElementSibling;
      if (next) {
        list.insertBefore(next, item);
      }
    }

    // 按钮点击事件监听器
    list.addEventListener('click', (e) => {
      const item = e.target.closest('li'); // 获取要移动的元素
      if (item) {
        if (e.target.classList.contains('up-btn')) {
          moveItemUp(item);
        } else if (e.target.classList.contains('down-btn')) {
          moveItemDown(item);
        }
      }
    });

    // 统计按钮点击事件监听器
    statsBtn.addEventListener('click', () => {
      const items = Array.from(list.children);
      const result = items.map((item, index) => { return item.innerText.trim() + index }).join(',');
      stats.textContent = result;
    });

  </script>
</body>

</html>
